import React, {useCallback, useState, useRef, useEffect} from 'react';
import {View, StyleSheet} from 'react-native';
import Colors from '../../utils/Colors';
import CateFilterTop from '../../component/cateFilter/CateFilterTop';
import ProductList from '../../component/cateFilter/ProductList';
import {useRoute} from '@react-navigation/native';
import {useDispatch} from 'react-redux';

const style = StyleSheet.create({
  categoryView: {
    flex: 1,
    position: 'relative',
    height: 900,
    width: '100%',
    backgroundColor: Colors.patBGGray,
  },
});
const Category = () => {
  const {params} = useRoute();
  const dispatch = useDispatch();
  console.log(params, 'Cate');
  const timer = useRef(null);
  const [top, setTop] = useState(0);
  const [isTop, setIsTop] = useState(false);
  const onScroll = useCallback(
    e => {
      const y = e.nativeEvent.contentOffset.y;
      if (timer.current === null) {
        setTop(y);
        timer.current = setTimeout(() => {
          clearTimeout(timer.current);
          timer.current = null;
        }, 200);
      }
      setIsTop(top < y && y > 50);
    },
    [top, timer],
  );
  useEffect(() => {
    dispatch({type: 'categroy/CATEGORY_LIST', payload: params.data.name});
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return (
    <View style={style.categoryView}>
      <CateFilterTop isTop={isTop} />
      <ProductList onScroll={onScroll} />
    </View>
  );
};

export default Category;
